<template>
  <xhh-select v-model="value" :options="[]" @change="handleChange">
    <template #empty><el-empty description=" " :image-size="40" /></template>
    <template #prefix><span>prefix</span></template>
  </xhh-select>
  <xhh-select v-model="value2" class="ml-5" @change="handleChange">
    <template #default>
      <el-option
        v-for="option in outOptions"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </template>
  </xhh-select>
  <xhh-select
    v-model="value3"
    class="ml-5"
    :options="options"
    @change="handleChange"
  >
    <template #option="{ label, value: v }">
      <span><span style="color: red">自定义的</span>{{ label }}-{{ v }}</span>
    </template>
  </xhh-select>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const value2 = ref('')
const value3 = ref('')
const outOptions = [
  {
    label: 'out label1',
    value: 'out value1',
  },
  {
    label: 'out label2',
    value: 'out value2',
  },
]
const options = [
  {
    name: ' label1',
    id: ' value1',
  },
  {
    name: ' label2',
    id: ' value2',
  },
]
function handleChange(...args) {
  console.log('handleChange', ...args)
}
</script>
<style lang="scss" scoped>
.ml-5 {
  margin-left: 5px;
}
</style>
